<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common_head :: commonHead('bar')"></head>
<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <div th:include="/header :: header"></div>
                <!--menu-right-->
                <!--//menu-right-->
                <div class="clearfix"></div>
            </div>
            <!-- //header-ends -->
            <!--/outer-wp-->
            <div class="outter-wp">
                <!--sub-heard-part-->
                <div class="sub-heard-part">
                    <ol class="breadcrumb m-b-0">
                        <li><a href="index.html">Home</a></li>
                        <li class="active">Maps</li>
                    </ol>
                </div>
                <!--//sub-heard-part-->
                <!--/graph-visual-->
                <div class="graph-visual">
                    <h2 class="inner-tittle">柱状图</h2>
                    <div class="graph">
                        <div class="map_container">
                            <input type="file" id="data" name="data"/>
                            <a class="btn blue four" type="button" id="draw">绘图</a>
                            <table class="table">
                                <thead>
                                <td></td>
                                <td>坐标轴含义</td>
                                <td>数据类型</td>
                                </thead>
                                <tr>
                                    <td>Y轴</td>
                                    <td><select class="line-y" id="line-y"></select></td>
                                    <td>
                                        <select class="y-type" id="y-type">
                                            <option value="value">value</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                            <div id="bar" style="width: 1000px;height:800px;"></div>
                        </div>
                    </div>
                </div>
                <!--/graph-visual-->

            </div>
            <!--//outer-wp-->
            <!--footer section start-->
            <footer th:include="/footer :: footer">
                <!--<p>Copyright &copy; 2018.Panda company</p>-->
            </footer>
            <!--footer section end-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <div class="sidebar-menu" th:include="/sidebar :: sidebar"></div>
    <div class="clearfix"></div>
</div>


<script>
    option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : [],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'value',
                type:'bar',
                barWidth: '60%',
                data:[]
            }
        ]
    };


    $("#draw").click(function () {
        var form=new FormData();
        form.append("data", $("#data")[0].files[0]);
        $.ajax({
            type:"post",
            url: "arraydata",
            data:form,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function(data){
                var xlist = [];
                var ylist = [];
                data=eval(data);
                var title = data[0];
                var y_select="";
                for(var i=1;i<title.length;i++){
                    y_select+="<option value =\"" + title[i]+ "\">" +title[i]+"</option>"
                }
                $("#line-y").append(y_select);
                $("#line-y").val(title[1]);
                $("#line-y").change(function () {
                    ylist = [];
                    var name=$(this).children("option:selected").text();
                    for(var i=1;i<title.length;i++) {
                        if(name==title[i]){
                            for(var j=1;j<data.length;j++){
                                ylist.push(data[j][i]);
                            }
                        }
                    }
                    option.series[0].data=ylist;
                    myChart.setOption(option);
                });
                for(var i=1;i<data.length;i++){
                    xlist.push(data[i][0]);
                    ylist.push(data[i][1]);
                }
                myChart = echarts.init(document.getElementById("bar"));
                option.xAxis[0].data=xlist;
                option.series[0].data=ylist;
                myChart.setOption(option);

            },
            error:function () {

            }
        })
    });
    $.ajax({
        type: "get",
        url: "listFile",
        processData: false,  // 告诉jQuery不要去处理发送的数据
        contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
        success: function (data) {
            for(var i=0;i<data.length;i++){
                $("#mydata").append("<option value =\"" + data[i]+ "\">" +data[i]+"</option>")
            }
        },
        error: function () {

        }
    });


</script>
</body>
</html>